<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
		<link rel="stylesheet" type="text/css" href="../icon/aosen/css/font-awesome.min.css" />
    <style>
    	body,html{
				background:white;
    	}
			.login-button{
					width: 14rem;
					height: 2.4rem;
					background: #e14104;
					text-align: center;
					line-height: 2.4rem;
					border-radius: 7px;
					margin: 0 auto;
					color: white
			}
      .my-getCode,.my-notgetCode{
          width: auto;
          height: 1.4rem;
          background: #e14104;
          margin-right: 1rem;
          position:absolute;
          top:50%;
          right: 0;
          margin-top: -0.7rem;
          font-size: 3.5vw;
          line-height: 1.4rem;
          border-radius: 4px;
          padding: 0 0.4rem;
          color: white;
      }
    </style>
</head>
<body>
    <div style="margin-top:1rem">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mobile"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入新的手机号码" id="mobileNum">
                    </div>
                </div>
            </li>
            
            <li class="aui-list-item" style="position:relative">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-cert"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="number" placeholder="请输入短信验证码" id="code">
                    </div>
                </div>
                <div class="my-getCode" onclick="getCode()">获取验证码</div>
                <div class="my-notgetCode aui-hide"></div>
            </li>
        </ul>
    </div>
		<div class="" style="width:100%;margin-top:2rem" onclick="submit()">
				<div class="login-button">确认换绑</div>
		</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript">
	
	apiready = function(){
	};
  function verifyMobile(){
      if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test($api.val($api.byId('mobileNum'))))){
          api.toast({
              msg: '您输入的号码格式有误，请重新输入！',
              duration: 4000,
              location: 'bottom'
          });
          return false;
      }else{
          return true;
      }
  }
  function getCode(){
      if(verifyMobile()){
		  
		  var data={};
		  data['values'] = {};
		  data['values']['phoneNum'] = $api.val($api.byId('mobileNum'));
		  data['values']['type'] = 'resetPhone';
		  requestData('Regist/getCode',data,'YES','NO','NO',_callbackRelt);
      }
  }
  function _callbackRelt(ret){
  	if(ret.status == 200){
  		api.toast({
          msg: '验证码已发送！',
          duration: 4000,
          location: 'bottom'
      });
      var counter = 60;
      $api.addCls($api.dom('.my-getCode'), 'aui-hide');
      $api.removeCls($api.dom('.my-notgetCode'), 'aui-hide');
      $api.text($api.dom('.my-notgetCode'), '('+counter+'s)后重新获取');

      var timer = setInterval(function(){
          counter--;
          $api.text($api.dom('.my-notgetCode'), '('+counter+'s)后重新获取');
          if(counter<0){
              $api.addCls($api.dom('.my-notgetCode'), 'aui-hide');
              $api.removeCls($api.dom('.my-getCode'), 'aui-hide');
              clearInterval(timer);
          }

      },1000);
  	}else{
  		api.toast({
          msg: ret.msg,
          duration: 4000,
          location: 'bottom'
      });
  	}
  }
  function submit(){
  	var data = {};
	data['values'] = {};
	data['values']['phoneNum'] = $api.val($api.byId('mobileNum'));
	data['values']['code'] = $api.val($api.byId('code'));
	data['values']['userId'] = $api.getStorage('userId');

	requestData('Regist/resetPhone',data,'NO','NO','NO',_callbackResetRelt);
  }
  function _callbackResetRelt(ret){
  	if(ret.status == 200){
			api.toast({
					msg: ret.msg,
					duration: 1000,
					location: 'bottom'
			});
			api.sendEvent({
	            name:'resetPhone'
            });
			$api.clearStorage();
			setTimeout(function(){
					api.closeToWin({
	                    name: 'firstPage'
                    });
			},1000);
			

	}else{
			api.toast({
					msg: ret.msg,
					duration: 1000,
					location: 'bottom'
			});
	}
  }
</script>
</html>
